<template>
    <transition appear name="side_anime">
        <div>
            <div class="back">
                <el-button type="success" size="mini" @click="back">返回</el-button>
            </div>
            <h1>权限列表</h1>
            <div class="btn">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogVisible=true">新增权限</el-button>
            </div>
            <!-- 权限列表 -->
            <el-table
            :data="permissionList"
            style="width: 100%">
                <el-table-column
                    prop="id"
                    label="权限ID"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="displayName"
                    label="权限名称(中文)"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="permisionName"
                    label="权限级别"
                    width="180">
                </el-table-column>
            </el-table>

            <el-dialog
                title="添加权限"
                v-model="dialogVisible"
                width="30%">
                <el-form :model="addForm" ref="addForm" label-width="100px" class="demo-ruleForm" :rules="rules">
                    <el-form-item label="权限中文" prop="displayName">
                        <el-input v-model="addForm.displayName" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="权限级别" prop="permisionName">
                        <el-input v-model="addForm.permisionName" clearable ></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </transition>
</template>
<script>
import { addPermissions, check } from '../../api/api'

export default {
    inject:['reload'],

    data() {
        return {
            permissionList:[],
            addForm:{},
            dialogVisible:false,
            rules: {
                displayName:{ required:true, message:'不能为空', trigger: 'blur'},
                permisionName:{ required:true, message:'不能为空', trigger: 'blur'}
            }
        }
    },
    mounted() {
        this.getPermissionList();
    },
    methods: {
        back() {
            this.$router.push("/homeview/roleList")
        },

        //获取所有权限
        getPermissionList() {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
                'satoken':token
            }
            check(header).then(response => {
                console.log('请求成功',response)
                this.permissionList = response.data
            })
        },

        //新增权限
        submitForm(formName) {
            let data = {
                displayName:this.addForm.displayName,
                permisionName:this.addForm.permisionName
            }
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
            'satoken':token
            }
            this.$refs[formName].validate((valid) => {  //开启校验
                if (valid) {   // 如果校验通过，请求接口，允许提交表单
                    addPermissions(data,header).then(response => {
                        console.log('请求成功',response)
                        if (response.code == '200'){
                            // this.total++
                            this.dialogVisible=false
                            this.$message({
                                message:'添加成功',
                                type: 'success',
                                showClose:true
                            })
                            this.reload()
                        }else {
                            this.$message({
                                message:'添加失败',
                                type: 'error',
                                showClose:true
                            })
                        }
                    })
                } else {   //校验不通过
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}
.back {
  text-align: left;
  margin-bottom: 30px;
}
.btn {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>
